<!-- TODO: 点赞点踩，删除 -->

<template>
  <a-comment>
    <template #actions>
      <span key="comment-basic-like">
        <a-tooltip title="Like">
          <template v-if="false">
            <LikeFilled />
          </template>
          <template v-else>
            <LikeOutlined />
          </template>
        </a-tooltip>
        <span style="padding-left: 8px; cursor: auto">
          {{ comments.like_count }}
        </span>
      </span>
      <span key="comment-basic-dislike">
        <a-tooltip title="Dislike">
          <template v-if="false">
            <DislikeFilled />
          </template>
          <template v-else>
            <DislikeOutlined />
          </template>
        </a-tooltip>
        <span style="padding-left: 8px; cursor: auto">
          {{ comments.dislike_count }}
        </span>
      </span>
      <span key="comment-basic-reply-to" v-if="level <= MAX_LEVEL" @click="replyVisible = !replyVisible">回复</span>
      <a-popconfirm
          title="你确定要删除这条评论吗？这将会删除所有回复并且不可恢复!"
          ok-text="删除"
          okType="danger"
          cancel-text="取消"
          @confirm="deleteThis"
      >
        <a-button type="link" danger
                  v-if="comments.author_id && comments.author.id === userId"
                  size="small">删除</a-button>
      </a-popconfirm>
    </template>
    <template #author>
      <a>{{ comments.author_id?comments.author.name:'匿名用户' }}</a>
      <a-tag v-if="comments.author_id && comments.author.level === 0" class="user-tag" color="blue">
        系统管理员
        <template #icon>
          <UserOutlined />
        </template>
      </a-tag>
      <a-tag v-if="comments.author_id && comments.author.id === author" class="user-tag" color="red">
        发布者
        <template #icon>
          <UserOutlined />
        </template>
      </a-tag>
    </template>
    <template #avatar>
      <a-avatar class="avatar" size="large">{{ comments.author_id?comments.author.name.charAt(0):'匿' }}</a-avatar>
    </template>
    <template #content>
      <div class="comment-text">
        {{ comments.comment }}
      </div>
    </template>
    <template #datetime>
      <a-tooltip :title="dayjs().format('YYYY-MM-DD HH:mm:ss')">
        <span>{{ dayjs(comments.created_at).fromNow() }}</span>
      </a-tooltip>
    </template>
  </a-comment>
  <PublishComment class="publish-box" v-if="replyVisible" @push="reply" />
  <div class="reply-comments">
    <CommentItem  v-for="comment in comments.replies"
                  :level="upLevel"
                  v-if="level <= MAX_LEVEL"
                  :comments="comment" :author="author"
                  @reload="emit('reload')"></CommentItem>
  </div>
</template>

<script setup>
import {LikeFilled, DislikeFilled, LikeOutlined, DislikeOutlined, UserOutlined} from "@ant-design/icons-vue";
import relativeTime from 'dayjs/plugin/relativeTime';
import dayjs from "dayjs";
import PublishComment from "./PublishComment.vue";
import {ref, watch} from "vue";
import {apiDelete, apiPost} from "../../../../fentch";
import {message} from "ant-design-vue";
import _default from "ant-design-vue/es/color-picker";
dayjs.extend(relativeTime);

const props = defineProps({
  comments: {
    type: Object,
    required: true,
    default: {
      "id": 0,
      "reply_id": 0,
      "author_id": 0,
      "blog_id": 0,
      "comment": "",
      "like_count": 0,
      "dislike_count": 0,
      "status": 0,
      "created_at": null,
      "updated_at": null,
      "replies": [],
      "author": {
        "id": 0,
        "name": "",
        "email": "",
        "email_verified_at": null,
        "status": 0,
        "level": 1,
        "deleted_at": null,
        "created_at": "2021-12-11",
        "updated_at": "2021-12-11"
      }
    }
  },
  author: {
    type: Number,
    required: true,
    default: 0
  },
  level: {
    type: Number,
    default: 0
  }
})

// 最大层级限制
const MAX_LEVEL = 2
// 递归限制
const upLevel = ref(props.level + 1)
watch(() => props.level, (value, oldValue) => {
  console.log('upLevel=' + value)
  upLevel.value = value + 1
})

// 获取用户ID
const user = JSON.parse(window.localStorage.getItem('user'))
const userId = user?user.id:null

const emit = defineEmits(['reload'])

// 回复框的可见性
const replyVisible = ref(false)

// 回复评论
const reply = form => {
  apiPost(`/comments/${props.comments.blog_id}`, {
    anonymous: form.anonymous,
    content: form.comment,
    reply_id: props.comments.id
  }).then(res => {
    if (res.data.code === 0) {
      message.success('发布成功')
      emit('reload')
      replyVisible.value = false
      return
    }
    message.error(res.data.message)
  })
}

// 删除本评论
const deleteThis = () => {
  apiDelete(`/comments/${props.comments.id}`).then(res => {
    if (res.data.code === 0) {
      message.success('删除成功')
      emit('reload')
      return
    }
    message.error(res.data.message)
  })
}
</script>

<style scoped>
.avatar {
  background-color: #1890ff;
}

.user-tag {
  margin-left: 5px;
}

.comment-text {
  margin: 10px 0;
}

.publish-box {
  margin-left: 44px;
}

.reply-comments {
  margin-left: 44px;
}
</style>